/* eslint-disable camelcase */
/* eslint-disable react/react-in-jsx-scope */
import classnames from 'classnames'
import Icon from '@/components/Icon'
import styles from './index.module.scss'
import { Article } from '@/types/data'
// import dayjs from 'dayjs'
// import relativeTime from 'dayjs/plugin/relativeTime'
// import 'dayjs/locale/zh-cn'
import Image from '@/components/Image/Image'
import { useHistory } from 'react-router-dom'
// dayjs.extend(relativeTime)
// dayjs.locale('zh-cn')
import { relativeTime } from '@/utils/relativeTime'
type Props = {
  /**
   * 图片类型说明
   * 0 表示无图 1 表示单图 3 表示三图
   */
  type?: 0 | 1 | 3
  article:Article
}

const ArticleItem = ({ article }: Props) => {
  // const {
  //   title,
  //   cover: { type, images },
  //   aut_name,
  //   comm_count,
  //   pubdate
  // } = article
  const type = article.cover.type
  const history = useHistory()
  return (
    // 点击跳转到文章详情页
    <div className={styles.root} onClick={() => history.push('/article/' + article.art_id)}>
      <div
        className={classnames(
          'article-content',
          { t3: type === 3, 'none-mt': type === 0 }
        )}
      >
        <h3>{article.title}</h3>
        {type !== 0 && (
          <div className="article-imgs">
            <div className="article-img-wrapper">
              {article.cover.images.map((image, index) =>
                <div key={index} className='article-img-wrapper' >
                  {/* <img src={image} alt="" /> */}
                  <Image src={image}></Image>
                </div>
              )}
            </div>
          </div>
        )}
      </div>
      <div className={classnames('article-info', type === 0 && 'none-mt')}>
        <span>{article.aut_name}</span>
        <span>{article.comm_count}评论</span>
        {/* <span>{dayjs(article.pubdate).fromNow()}</span> */}
        <span>{relativeTime(article.pubdate)}</span>
        <span className="close">
          <Icon type="iconbtn_essay_close" />
        </span>
      </div>
    </div>
  )
}

export default ArticleItem
